// Assume you have a WebGL context 'gl' and a canvas element 'canvas'
const gl = canvas.getContext('webgl');
const ctx = document.createElement('canvas').getContext('2d');

// Get the rendering buffer
const renderBuffer = new Uint8Array(gl.drawBuffer());

// Create a new canvas with the same dimensions as the original
const newCanvas = document.createElement('canvas');
newCanvas.width = gl.canvas.width;
newCanvas.height = gl.canvas.height;

// Draw the WebGL content to the new canvas
ctx.drawImage(newCanvas, 0, 0);

// Get the pixel data from the new canvas
const imageData = ctx.getImageData(0, 0, newCanvas.width, newCanvas.height);

// Create a new image element and set its src attribute
const img = new Image();
img.src = `data:image/png;base64,${imageData.data.toString('base64')}`;

// You can now use the 'img' element as needed (e.g., display it on the page)
document.body.appendChild(img);